<template>
  <div class="taskDetails">
    <div class="taskDetails-tip">
      <div class="bai"></div>
      <van-nav-bar
        title="任务详情"
        left-arrow
        fixed
        safe-area-inset-top
        @click-left="onClickLeft"
      >
      </van-nav-bar>
    </div>
    <div
      class="taskDetails-content"
      :style="{ paddingBottom: type === 'handle' ? '70px' : '16px' }"
    >
      <div class="content">
        <!-- 任务类型 -->
        <div class="taskType">
          <van-cell
            v-for="item in goodsInfoCard"
            :title="item.title"
            :value="item.content"
          />
        </div>
        <!-- 商机概况 -->
        <div class="BusinessOpportunities">
          <bob-card title="商机概况" rightTitle="点击查看" @click="rightBtn">
            <van-cell
              v-for="item in goodsInfoCard"
              :title="item.title"
              :value="item.content"
            />
          </bob-card>
        </div>
        <!-- 企业详情 -->
        <div class="EnterpriseDetails">
          <bob-card title="商机概况">
            <van-cell
              v-for="item in goodsInfoCard"
              :title="item.title"
              :value="item.content"
            />
          </bob-card>
        </div>
        <!-- 处理意见 -->
        <div>
          <bob-card title="处理详情" v-if="type">
            <van-form ref="from">
              <van-field name="radio" label="处理意见">
                <template #input>
                  <van-radio-group v-model="checked" direction="horizontal">
                    <van-radio name="1">同意</van-radio>
                    <van-radio name="2">不同意</van-radio>
                  </van-radio-group>
                </template>
              </van-field>
              <van-cell-group inset>
                <van-field
                  v-model="message"
                  rows="2"
                  autosize
                  type="textarea"
                  maxlength="50"
                  label-align="top"
                  label="意见描述"
                  placeholder="请简要描述您的意向描述"
                  :rules="[{ required: true, message: '请填写意向描述' }]"
                  show-word-limit
                  class="text"
                />
              </van-cell-group>
            </van-form>
          </bob-card>
        </div>
      </div>
    </div>
    <div class="taskDetails-bottom" v-if="type">
      <van-button type="primary" @click="dialog">确定</van-button>
    </div>
  </div>
</template>

<script setup lang="ts">
import { useRoute } from "vue-router";
const route = useRoute();
const type = route.query.type;
const onClickLeft = () => history.back();
const checked = ref("1"); //单选框
const message = ref("");
const from = ref();

// 测试数据-商品信息
const goodsInfoCard = ref([
  { title: "商品名称", content: "机械，零部件" },
  { title: "商品名称", content: "机械，零部件" },
  { title: "商品名称", content: "机械，零部件" },
  { title: "商品名称", content: "机械，零部件" },
  { title: "商品名称", content: "机械，零部件" },
  { title: "商品名称", content: "机械，零部件" },
]);
const rightBtn = () => {
  console.log(1);
};
const dialog = async () => {
  await from.value.validate();
  console.log(message.value, checked.value);
};
</script>

<style lang="scss" scoped>
.taskDetails {
  width: 100%;
  &-tip {
    .bai {
      background-image: url(/src/assets/images/redBac.png);
      height: 273px;
      background-repeat: no-repeat; /* 不重复背景图片 */
      background-position: center; /* 背景图片居中显示 */
      background-size: cover; /* 背景图片覆盖整个 div */
      position: relative;
    }
    :deep(.van-nav-bar) {
      background-color: transparent;
    }
    :deep(.van-nav-bar .van-icon) {
      color: black;
    }
    :deep(.van-nav-bar__title) {
      font-weight: 400;
      font-size: 17px;
      color: #ffffff;
    }
    :deep(.van-hairline--bottom:after) {
      border-bottom-width: 0;
    }
  }
  &-content {
    padding: 16px;
    position: absolute;
    top: 44px;
    left: 0;
    z-index: 0;
    width: 100%;
    box-sizing: border-box;
    overflow-y: auto;
    max-height: calc(100vh - 44px);

    .content {
      background-color: #ffffff;
      border-radius: 13px;
    }
    .taskType {
      border-radius: 13px;
      background-color: #ffffff;
      padding: 15px;
      margin-bottom: 25px;
      box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); /* 水平偏移 垂直偏移 模糊半径 颜色和透明度 */
    }

    .van-cell {
      padding: 0 0 16px 0;
      font-size: 15px;
      background: transparent;
    }
    :deep(.van-cell__title) {
      color: #86909c;
    }
    :deep(.van-cell__value) {
      color: #1d2129;
    }
    .van-cell::after {
      content: none;
    }
    .van-cell:last-child {
      padding: 0;
    }
    :deep(.van-field__control--custom) {
      justify-content: flex-end;
    }
    .van-cell-group--inset {
      margin: 0;
    }
  }
  &-bottom {
    background-color: white;
    width: 100%;
    height: 60px;
    margin-top: 16px;
    position: fixed;
    left: 0;
    bottom: 0;
    z-index: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    button {
      width: 343px;
      height: 40px;
      border-radius: 100px;
      text-align: center;
    }
  }
}
</style>

